<template>
  <div class="erea-container">
    <!-- 添加区域 -->
    <div class="search-container">
      <div class="create-container">
    <el-button class="btn" type="success" :round="true" @click="open">增加区域</el-button>
  </div>
  </div>
  <div class="table">
    <el-table style="width: 100%;" :data="list">
      <el-table-column type="index" label="序号"  prop="id" />
      <el-table-column label="区域名称" prop="areaName"/>
      <el-table-column label="车位数（个）" prop="spaceNumber"/>
      <el-table-column label="面积(㎡)" prop="areaProportion"/>

      <!-- <el-table-column label="计费规则" width="180" prop="ruleName">
        使用 el-tooltip 包裹显示描述内容 
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.hoverRuleName" placement="top">
            <div>{{ scope.row.ruleName }}</div>
          </el-tooltip>
        </template>
      </el-table-column> -->

      <el-table-column label="计费规则"  >
        <template #default="scope">
        <el-tooltip class="item" effect="dark" width="20" :content="scope.row.hoverRuleName" placement="bottom">
        <!-- <div class="给提示的内容包一层div">  -->
          <span class="account-name"> {{ scope.row.ruleName }} </span>
        <!-- </div> -->
        </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="备注" prop="remark"/>
      <el-table-column label="操作" fixed="right" width="180">
        <template #default="scope">
          <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

    <!--分页结构  total:发请求时存下的总数 -->
    <div class="box"> 
      <el-pagination
        layout="total, sizes, prev, pager, next"
        :total="total" 
        :current-page="params.page"
        :page-sizes="[5, 8, 10]"
        :page-size="params.pageSize"
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange"

      />
    </div>

    <!-- 准备一个看不见的对话框dialog -->
    <!-- close事件 点击x号时或其他层时触发 -->
    <el-dialog :title="form.id ? '编辑区域' : '添加区域'" :visible="flag" @close="handleClose">
      <div style="display: flex; justify-content: center;">
      <el-form ref="form" :model="form" :rules="rules" style="width: 400px">

      <el-form-item label="区域名称" prop="areaName">
        <el-input v-model="form.areaName"/>
      </el-form-item>

      <el-form-item label="车位数（个）" prop="spaceNumber">
        <el-input v-model="form.spaceNumber"/>
      </el-form-item>

      <el-form-item label="面积(㎡)" prop="areaProportion">
        <el-input v-model="form.areaProportion"/>
      </el-form-item>

      <el-form-item label="计费规则"    prop="ruleId" :label-width="forLabelWidth"  >
      <el-select v-model="form.ruleId" >
        <el-option label="按分钟计费" :value="1" />
        <el-option label="分段计费" :value="4" />
        <el-option label="按次计费" :value="3" />
        <el-option label="按小时计费" :value="2" />
      </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark"/>
      </el-form-item>

      <el-form-item>
        <el-button>取 消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>

      </el-form-item>

      </el-form>
      </div>


      

    </el-dialog>
  </div>
    
 
</template>


<script>
import { getAreaListAPI, addAreaListAPI, editAreaListAPI, delAreaListAPI } from '@/api/area'
export default{
 
  name:'Area',

  data(){
    return{
      flag: false,
      total:0,
     list:[], 
     params:{
      name:'',
      page:1,
      pageSize: 10
      
      
    },
    form:{
  
      areaName:'',
      spaceNumber:'',
      areaProportion:'',
      ruleId:'',
      remark:''

    },
    rules:{
        areaName:[
          {required: true, message: '请输入区域名称', trigger: 'blur'}
        ],
        spaceNumber:[
          {required: true, message: '请输入该区域的车位数', trigger: 'blur'}
        ],
        areaProportion:[
          {required: true, message: '请输入该区域的面积', trigger: 'blur'}
        ],
        ruleId:[
          {required: true, message: '请输入计费规则', trigger: 'blur'}
        ],
        
      }
    
    
  }

  },

  mounted(){
    this.getList()
  },

  methods:{


    del(id) {
      //二次确认删除 
      this.$confirm('确定删除吗？').then(() =>{
        delAreaListAPI(id).then(() => {
          //需要在本页最后一条数据时 回到上一页
          //此时后端已删 但是前端未删
          if(this.list.length === 1) this.params.page--
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() =>{
        //取消
      })
    },
    edit(row) {
      // 1. 打开弹框
      //console.log(row)
      this.flag = true
      //数据回显
      this.form.areaName = row.areaName
      this.form.spaceNumber = row.spaceNumber
      this.form.areaProportion = row.areaProportion
      this.form.ruleId = row.ruleId
      this.form.remark = row.remark
      this.form.id = row.id
    },

    confirm(){
      this.$refs.form.validate((ok) => {
        if(ok){
          if(this.form.id){
            console.log('编辑成功')
            editAreaListAPI(this.form).then(() => {
              this.$message.success('编辑成功')
              this.getList()
              this.flag = false

              this.form={
                areaName:'',
                spaceNumber:'',
                areaProportion:'',
                ruleId:'',
                remark:''
              }
            })
          }else{
            addAreaListAPI(this.form).then(() => {
              this.$message.success('添加成功')
              this.getList()
              this.flag=false
              this.form={
                  areaName:'',
                  spaceNumber:'',
                  areaProportion:'',
                  ruleId:'',
                  remark:''
                }
              }
              )
            }
          }
        })
    },


    open(){
    this.flag=true
  },

  handleClose(){
    console.log('有人点x号了')
    this.flag=false
    this.form={
              areaName: '',
              spaceNumber: '',
              areaProportion: '',
              ruleId: '',
              remark:''
            }
            this.$refs.form.clearValidate

  },

    getList(){
    getAreaListAPI(this.params).then((res) => {
      console.log(res)
      this.list = res.data.rows
      this.total = res.data.total
    })
  },

  handleSizeChange(pageSize){
    // console.log('每页条数变化了', pageSize)
    this.params.pageSize = pageSize//更新每页条数
    this.params.page = 1 //以前必须这么做 => 以前不会主动重置（已经修复）

    this.getList()
    
  },
  handleCurrentChange(page){
    // console.log('页码变化了', page)
    //更新页码
    this.params.page = page //重新获取最新页码的数据

    this.getList()
  },


  }
}

</script>

<style lang="scss" scoped>
.btn{
  margin: 20px;
}

.box{
//flex弹性容器  横向布局
display: flex;
  //flex默认从左往右
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: 20px;

}
</style>
